import DatePicker from "components/antd-compatible/date-picker";
import React, { Component, PropTypes } from 'react'
import { Badge,  Form, Icon, message, Modal } from 'antd'
import { messages } from "share/common";
import moment from "moment";
import paymentService from "../pay-workbench.service";

class SuccessModal extends Component {

  state = {
    loading: false
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible === this.props.visible) {
      return -1;
    }
    if (!nextProps.visible) {
      this.props.form.resetFields();
      return -1
    }
  }

  handleOk = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { record, onCancel } = this.props;
        this.setState({ loading: true });
        paymentService.confirmRefund(moment(values.refundDate).format('YYYY-MM-DD'), record).then(() => {
          message.success(messages('common.operate.success')/*操作成功*/);
          this.setState({ loading: false }, onCancel(true));
        }).catch((e) => {
          this.setState({ loading: false });
          message.error(messages('finance-4.key167',{arg1: e.response.data.message})/*退票失败，{arg1},请重试!*/)
        })
      }
    });
  };

  render() {
    const { visible, onCancel } = this.props;
    const { loading } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal
        visible={visible}
        onCancel={() => onCancel(false)}
        confirmLoading={loading}
        onOk={this.handleOk}
        okText={messages('finance-4.key168')/*确认退票*/}
        width={400}
      >
        <div style={{ height:110 }}>
            <span style={{ marginRight:10, fontSize:14 }}>
              <Icon type="exclamation-circle" style={{color:'#faad14', fontSize:22, marginRight:8, position:'relative', top:2}}/> {messages('finance-4.key129')/*将付款状态更改为*/}
            </span>
          <Badge status="error" text={messages('finance-4.key165')/*退票*/}/>
          <div style={{fontSize:12,color:'red',marginLeft:29}}>{messages('finance-4.key169')/*请务必向银行确认该付款已退票，以免产生重复支付*/}</div>
          <Form style={{marginLeft:29}}>
            <Form.Item
              wrapperCol={{ span: 15, offset: 1 }}
              labelCol={{ span: 6 }}
              label={messages('finance-4.key170')/*退票日期*/}
              style={{ margin: '20px 0 10px' }}
            >
              {getFieldDecorator('refundDate', {
                rules: [{ required: true, message: messages('finance-4.key136')/*请选择temp*/ }],
                initialValue: moment(new Date())
              })(
                <DatePicker
                  format="YYYY-MM-DD"
                  placeholder={messages('finance-4.key136')/*请选择temp*/}
                  disabledDate={current => current && current.valueOf() > Date.now()}
                  allowClear={false}
                />
              )}
            </Form.Item>
          </Form>
        </div>
      </Modal>
    )
  }

  static propTypes = {
    onCancel: PropTypes.func,
    visible: PropTypes.bool,
    record: PropTypes.object
  }

}

const wrappedSuccessModal = Form.create()(SuccessModal);
export default wrappedSuccessModal;
